<template>
	<div class="tableContainer">
		<el-table v-el-height-adaptive-table="{bottomOffset:50}" height="750" highlight-current-row row-key="id" :data="tableData"
		 style="width:100%;" stripe @row-click="handleRowClick">

			<el-table-column v-for="(col, index) in rowHeader" :key="index" :prop="col.prop" :label="col.label" :sortable="col.sort"
			 :min-width="col.width" :formatter="col.formatter" :align="col.align?col.align:'center'">
				<template slot-scope="scope">
					<span v-if="col.render">
						{{ col.render(scope.row) }}
					</span>
					<span v-else>{{ scope.row[col.prop] }}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column label="图片">
    <template slot-scope="scope">

          <el-image
            style="width: 40px; height: 40px"
            :src="scope.row.imageUrlOne"
            :preview-src-list="scope.row.srcList"
          >
            <div
              slot="error"
              class="image-slot"
            >
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>

        </template>
</el-table-column> -->
			<el-table-column v-if="tableOption.label" :min-width="tableOption.width" :width="tableOption.width" :label="tableOption.label"
			 align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button v-for="(item,index) in tableOption.options" :key="index" v-auth="item.persstion" :style="item.style"
					 :type="item.type" :icon="item.icon" size="mini" @click.native.stop="handleButton(item.methods,tableData,scope.row,scope.$index)">
						{{ item.label }}
					</el-button>
				</template>
			</el-table-column>

		</el-table>
		<!-- 是否调用分页 -->
		<el-pagination v-if="isHidden" background class="tablePage" layout="total, sizes,prev, pager, next, jumper"
		 :page-size="pageObj.size" :page-sizes="pageObj.pageSizes" :total="pageObj.total" :current-page="pageObj.currentPage"
		 @current-change="handleCurrentChange" @size-change="handleSizeChange" />
	</div>
</template>
<script>
import elHeightAdaptiveTable from '@/directive/el-table/index.js'
export default {
  directives: {
    elHeightAdaptiveTable
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    keys: {
      type: String,
      default: 'id'
    },
    rowHeader: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableOption: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isHidden: {
      type: Boolean,
      default: true
    },
    pageObj: {
      type: Object | Boolean,
      default: () => {
        return {
          size: 10,
          total: 0,
          pageSizes: [10, 50, 100, 200],
          currentPage: 1
        }
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    },
    handleSizeChange (val) {
      this.$emit('handleSizeChange', val)
    },
    handleButton (method, data, row, index) {
      this.$emit('handleButton', method, data, row, index)
    },
    handleRowClick (row, column, event) {
      this.$emit('handleRowClick', row, column)
    }
  }
}
</script>
<style lang="scss" scoped>
	.tableContainer {
		position: relative;
	}

	.tablePage {
		text-align: center;
		position: absolute;
		width: 100%;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}

	.imageList {
		overflow: hidden;

		li {
			width: 100px;
			height: 100px;
			float: left;
			margin-right: 20px;
			border: 1px dashed #07557c;

			.pic {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
</style>
